<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>localStorage设置过期时间</title>
</head>

<body>
  <h3>前端三大缓存，cookie，sessionStorage，localStorage</h3>
  <ul>
    <li>cookie空间太小，一旦大了，会消耗流量，只适合存一些登录会话信息</li>
    <li>sessionStorage的过期时间就是关闭浏览器，是个临时会话窗口,只能在同一标签（当前标签）下共享</li>
    <li>localStorage存储空间大，长时间保存，同一浏览器，标签页全部共享。它是永久有效的，除非手动改清除</li>
  </ul>

  <h4>应用场景：</h4>
  <p>前端部分：在路由刷新（跳转）时判断token是否过期，过期则重定向跳转登录页</p>
  <p>后端部分：处理前端发送请求的token是否过期或失效，响应返回状态码或者错误信息给前端，再由前端重定向跳转</p>

  <script>

    //设置失效时间--封装storage
    class PageStorage {
      constructor(name) {
        this.name = name
      }
      setItem(params) {
        let obj = {
          name: '',
          value: '',
          expires: '',  //过期时间毫秒级，比如60*60*24*1000 24小时
          startTime: new Date().getTime() //记录何时将值存入缓存中，毫秒级
        }
        let options = {}
        if (typeof params !== 'object' || params == null) { //判断object或者array
          return
        }
        if (params instanceof Array) { //判断array
          //Object.prototype.toString.call(value) === "[object Array]";
          //Array.isArray(value)
          //typeof o.length == 'number'
          //o instanceof Array
          return
        }

        Object.assign(options, obj, params);

        if (options.expires) {  //如果设置了过期时间
          //以options.name为key，options为值放进去
          localStorage.setItem(options.name, JSON.stringify(options))

        } else {
          //如果options.expires没有设置，就判断一下value的类型  key=>options.name = value=>options.value
          //如果value是对象或者数组对象的类型，用JSON.stringify处理
          if (typeof options.value === 'object' && options.value != null) {
            options.value = JSON.stringify(options.value);
          }

          localStorage.setItem(options.name, options.value);
        }
      }
      //拿到缓存
      getItem(name) {
        let item = localStorage.getItem(name);
        //先将拿到的试着进行json转为对象的形式
        try {
          item = JSON.parse(item);
        } catch (error) {
          //如果不行就不是json的字符串，就直接返回
          item = item;
        }
        //如果有startTime的值，说明设置了失效时间
        if (item.startTime) {
          let date = new Date().getTime();
          //何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
          if (date - item.startTime > +item.expires) {
            //缓存过期，清除缓存，返回false
            localStorage.removeItem(name);
            return false;
          } else {
            //缓存未过期，返回值
            return item.value;
          }
        } else {
          //如果没有设置失效时间，直接返回值
          return item;
        }
      }
      //移出缓存
      removeItem(name) {
        localStorage.removeItem(name);
      }
      //移出全部缓存
      clear() {
        localStorage.clear();
      }

    }

    //localstorage需要在服务器环境下打开，有url地址
    var storage = new PageStorage();
    storage.setItem({
      name: "token",
      value: "xxxyyycccsadsfasf123123",
      expires: 5000
    })
    console.log(storage.getItem('token'))

    setTimeout(function () {
      console.log(storage.getItem('token'))
    }, 5000)

//资料引用
//https://blog.csdn.net/zhaoxiang66/article/details/86703438

//https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#expire-cookies-in-less-than-a-day
//https://www.cnblogs.com/z-y-zone/p/10195877.html
//https://blog.csdn.net/liuyingv8/article/details/80257145


  </script>
</body>

</html>